<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>在线天地图-4326</title>
	<link rel="stylesheet" type="text/css" href="../../../../libs/ol4/ol.css"/>
	<style type="text/css">
		body, #map {
			border: 0px;
			margin: 0px;
			padding: 0px;
			width: 100%;
			height: 100%;
			font-size: 13px;
		}
	</style>
	<script type="text/javascript" src="../../../../libs/ol4/ol.js"></script>
	<script type="text/javascript" src="../../../../libs/jquery/jquery-3.1.1.min.js"></script>
	<script type="text/javascript" src="js/move-line.js"></script>
	<script>
        var map;
        function init(){
            var projection = new ol.proj.Projection({
                code: 'EPSG:4326',
                units: 'degrees'
            });
            var img_c = getTdtLayer("img_c");
            map = new ol.Map({
                controls: ol.control.defaults({
                    attribution: false
                }),
                target: 'map',
                layers: [img_c],
                view: new ol.View({
                    projection: projection,
                    center:[113.275995, 23.117055],
                    zoom:6,
                    minZoom:0,
                    maxZoom:18
                })
            });
            $("#wind").on("click", function(){
                var data = [
                    {
                    from: {
                        city: '广州',
                        lnglat: [113.270793, 23.135308]
                    },
                    to: {
                        city: '衡山',
                        lnglat: [112.612787, 27.317599]
                    }
                }, {
                    from: {
                        city: '广州',
                        lnglat: [113.270793, 23.135308]
                    },
                    to: {
                        city: '北京',
                        lnglat: [116.413554, 39.911013]
                    }
                }, {
                    from: {
                        city: '广州',
                        lnglat: [113.270793, 23.135308]
                    },
                    to: {
                        city: '三亚',
                        lnglat: [109.518646, 18.258217]
                    }
                }, {
                    from: {
                        city: '广州',
                        lnglat: [113.270793, 23.135308]
                    },
                    to: {
                        city: '上海',
                        lnglat: [121.480237, 31.236305]
                    }
                }, {
                    from: {
                        city: '广州',
                        lnglat: [113.270793, 23.135308]
                    },
                    to: {
                        city: '韶关',
                        lnglat: [113.603757, 24.816174]
                    }
                }
                ];
                var moveLine = new MoveLine(map, {
                    //marker点半径
                    markerRadius: 2,
                    //marker点颜色,为空或null则默认取线条颜色
                    markerColor: null,
                    //线条类型 solid、dashed、dotted
                    lineType: 'solid',
                    //线条宽度
                    lineWidth: 2,
                    //线条颜色
                    colors: ['#F9815C', '#F8AB60', '#EDCC72', '#E2F194', '#94E08A', '#4ECDA5'],
                    //移动点半径
                    moveRadius: 3,
                    //移动点颜色
                    fillColor: '#fff',
                    //移动点阴影颜色
                    shadowColor: '#fff',
                    //移动点阴影大小
                    shadowBlur: 6,
                    data: data
                });
            });
        }

        function getTdtLayer(lyr){
            var url = "http://t0.tianditu.com/DataServer?T="+lyr+"&X={x}&Y={y}&L={z}";
            var projection = ol.proj.get("EPSG:4326");
            var projectionExtent = [ -180, -90, 180, 90 ];
            var maxResolution = (ol.extent.getWidth(projectionExtent) / (256 * 2));
            var resolutions = new Array(16);
            var z;
            for (z = 0; z < 16; ++z) {
                resolutions[z] = maxResolution / Math.pow(2, z);
            }
            var tileOrigin = ol.extent.getTopLeft(projectionExtent);
            var layer = new ol.layer.Tile({
                extent: [ -180, -90, 180, 90 ],
                source: new ol.source.TileImage({
                    crossOrigin: 'anonymous',
                    tileUrlFunction: function(tileCoord) {
                        var z = tileCoord[0]+1;
                        var x = tileCoord[1];
                        var y = -tileCoord[2]-1;
                        var n = Math.pow(2, z + 1);
                        x = x % n;
                        if (x * n < 0) {
                            x = x + n;
                        }
                        return url.replace('{z}', z.toString())
                            .replace('{y}', y.toString())
                            .replace('{x}', x.toString());
                    },
                    projection: projection,
                    tileGrid: new ol.tilegrid.TileGrid({
                        origin: tileOrigin,
                        resolutions: resolutions,
                        tileSize: 256
                    })
                })
            });
            return layer;
        }
	</script>
</head>
<body onLoad="init()">
<button id="wind" style="position:absolute;top: 10px;right: 10px;z-index: 99;">add Wind</button>
<div id="map">
</div>
</body>
</html>